<template>
  <div class="p-12px">
    <n-list bordered clickable hoverable>
      <n-list-item
        v-for="session in chatStore.chatList"
        :key="session.id"
        @click="chatStore.setCurrentChat(session.id)"
        :class="{ 'bg-primary': session.id === chatStore.currentChat?.id }"
      >
        <div>
          {{ session.messages?.[0]?.question ? session.messages?.[0]?.question : '新建聊天' }}
        </div>
      </n-list-item>
    </n-list>
  </div>
</template>
<script lang="ts" setup>
import { useChatStore } from '@/stores/chat'
import { ref } from 'vue'
defineOptions({ name: 'HistorySession' })
const chatStore = useChatStore()
</script>
<style lang="scss"></style>
